<template>
  <section class="attack-detail-page">
    <BlockTitle title="基本信息" border-style="bottom"/>
    <div class="base-info-box">
      <div class="base-title">
        <img class="image" :src="require('@/views/attackAngle/assets/vul.png')"/>
        <div class="name">{{ basicInfo.viewName }}</div>
        <el-tag type="danger" size="small" effect="plain" v-for="tag in basicInfo.threatTag">{{ tag }}</el-tag>
        <el-tag type="danger" size="small" effect="dark">{{ basicInfo.score }}</el-tag>
      </div>
      <el-row :gutter="15">
        <el-col
            :span="item.span"
            v-for="(item, index) in basicInfoArray"
            :key="index"
        >
          <div class="base-content">
            <div class="key-box" :style="{ width: item.width }">
              {{ item.key }}
            </div>
            <div class="value-box">
              <span>{{ item.value }}</span><span>{{item.unit}}</span>
            </div>
          </div>
        </el-col>
        <el-col v-if="basicInfo.eventType.length">
          <div class="base-content">
            <div class="key-box" style="width: 120px;">
              标签
            </div>
            <div class="value-box">
              <el-tag  size="small" effect="plain" v-for="tag in basicInfo.eventType">{{ tag }}</el-tag>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <BlockTitle title="攻击图谱" border-style="bottom" />
    <OrganizeAtlas :date-picker-value="propDateValue" :view-type="viewType" :view-name="viewName"/>
    <BlockTitle title="评分详情">
      <template v-slot>
        <el-popover
            placement="right"
            title=""
            width="200"
            trigger="hover"
            content="如果评分大于100分，总分按照100分显示"
        >
          <span class="el-icon-question" slot="reference"> </span>
        </el-popover>
      </template>
    </BlockTitle>
    <RatingDetail :date-picker-value="propDateValue" :view-type="viewType" :view-name="viewName"/>
    <BlockTitle title="威胁活跃趋势" />
    <ThreatTrendsChart :date-picker-value="propDateValue" :view-type="viewType" :view-name="viewName"/>
    <BlockTitle title="影响目标" />
    <InfluenceChart :date-picker-value="propDateValue" :view-type="viewType" :view-name="viewName" />
    <BlockTitle title="影响信息" />
    <ImpactInfo :date-picker-value="propDateValue" :view-type="viewType" :view-name="viewName" />
    <BlockTitle title="攻击过程" />
    <AttackProcess :date-picker-value="propDateValue" :view-type="viewType" :view-name="viewName"/>
  </section>
</template>
<!--组织 图谱-->
<script>
import {numConvert} from '@/utils/pe_util.js'
import BlockTitle from '@/components/BlockTitle.vue';
import OrganizeAtlas from './components/OrganizeAtlas.vue';
import RatingDetail from './components/RatingDetail.vue';
import ThreatTrendsChart from './components/ThreatTrendsChart.vue';
import InfluenceChart from './components/InfluenceChart.vue';
import ImpactInfo from './components/ImpactInfo.vue';
import AttackProcess from './components/AttackProcess.vue';

export default {
  name: "AttackAngleDetailPage",
  data() {
    return {
      // 页面携带过来的参数 ---------
      propDateValue: [],
      viewType: 0,
      viewName: '',
      // ---------
      basicInfo: {},
      basicInfoArray: [],
    }
  },
  components: {BlockTitle,OrganizeAtlas,RatingDetail,ThreatTrendsChart,InfluenceChart,ImpactInfo,AttackProcess},
  created() {
    this.initParams();
  },
  methods: {
    initParams() {
      const query = this.$route.query;
      this.propDateValue = [query.startTime, query.endTime];
      this.viewType = Number(query.viewType);
      this.viewName = query.viewName;
      this.basicInfo = JSON.parse(localStorage.getItem('attackAngleItem'));
      this.setBasicInfoData();
    },
    setBasicInfoData() {
      const viewType2 = [
        {
          width: "120px",
          key: "恶意域名数目",
          value: numConvert(this.basicInfo.maliciousDomainNum || 0),
          unit: "个",
          span: 6,
        },
        {
          width: "120px",
          key: "恶意IP数目",
          value: numConvert(this.basicInfo.maliciousIpNum || 0),
          unit: "个",
          span: 6,
        },
        {
          width: "120px",
          key: "影响暴露面",
          value: numConvert(this.basicInfo.exposedNum || 0),
          unit: "个",
          span: 6,
        },
      ];
      const viewType3_4 = [
        {
          width: "120px",
          key: "影响资产",
          value: numConvert(this.basicInfo.deptNum || 0),
          unit: "个",
          span: 6,
        },
      ];
      this.basicInfoArray = [
        {
          width: "120px",
          key: "攻击次数",
          value: numConvert(this.basicInfo.detectionNum || 0),
          unit: "个",
          span: 6,
        },
        {
          width: "120px",
          key: "影响IP",
          value: numConvert(this.basicInfo.ipNum || 0),
          unit: "个",
          span: 6,
        },

        {
          width: "120px",
          key: "持续周期",
          value: numConvert(this.basicInfo.duration || 0),
          unit: "天",
          span: 6,
        },
        {
          width: "120px",
          key: "最新检出",
          value: this.basicInfo.lastTime,
          unit: "",
          span: 6,
        },
        {
          width: "120px",
          key: "首次检出",
          value: this.basicInfo.firstTime,
          unit: "",
          span: 6,
        }
      ];
      if (this.viewType === 2) {
        this.basicInfoArray.unshift(...viewType2);
      } else {
        this.basicInfoArray.unshift(...viewType3_4);
      }
    }
  }
}
</script>

<style lang="scss">
.attack-detail-page {
  .base-info-box {
    .base-title {
      display: flex;
      align-items: center;
      padding: 10px 0;

      .image {
        width: 20px;
      }

      .name {
        font-size: 16px;
        margin: 0 10px;
      }

      .el-tag {
        margin-right: 10px;
      }
    }
    .base-content{
      display: flex;
      line-height: 40px;
      .key-box {
        font-weight: 400;
        font-size: 15px;
        color: #808191;
      }
      .value-box {
        flex: 1;
        font-weight: 400;
        font-size: 15px;
        color: #3f405d;
        .el-tag{
          margin-right: 10px;
        }
      }
    }
  }
}
</style>